iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
0
自我挑戰組

sass&css 30天學習日誌系列 第 27

SASS : each、while

  • 分享至 

  • xImage
  •  

@each

常用於網站要插入多個icon圖示,圖片網址都一樣,但是圖片名稱都不一樣,這種重複性的工作很適合使用@each,也就是把列表內的數值,一一導入並列出來

語法如下:

@each $var in <list or map>

上方的 的list就是要導入的數值,如下圖圈選處
#{}為插值 https://ithelp.ithome.com.tw/articles/10204325

https://ithelp.ithome.com.tw/upload/images/20200412/201073217OxYOgYUJx.png

map就是sass maps,建立map內容,再把它導入,如下圖圈選處
$value就是map裡面,key(fw_n)的值(normal)

https://ithelp.ithome.com.tw/upload/images/20200412/20107321ZtW9HmGaYv.png

@while

while跟if很像,if只能一次執行一組條件,while只要符合true條件,他會一直跑下去,除非手動停止,否則很容易形成無限迴圈也因此稍有不慎會影響電腦效能,所以在程式中都會謹慎使用他
可參考這篇文章:http://sohumtw.blogspot.com/2012/07/for-while-if-switch.html

     @while <boolean expression> { 
        <statements>
    }

上方的boolean expression 就是布林值 true/false的判斷,像是 1>2,就是false,2>1,就是true的布林判斷,在此只要條件是false就會停止下來

要注意不要一直都是@while true { ... },否則會跑無限迴圈

也因此設定條件會比較嚴格,下方$h是大於0就跑while,但是裡面內容的$h會遞減,所以跑到$h為1,就停止下來
要注意如果紅色圈選處為遞增的話,電腦效能會受到影響,也因此設定條件要多加注意

https://ithelp.ithome.com.tw/upload/images/20200412/20107321WlyB6rC9GM.png

參考文件:
http://www.tutorialsteacher.com/sass/sass-control-directives
http://thesassway.com/intermediate/if-for-each-while


上一篇
SASS : if else應用- border radius
下一篇
SASS : SASS Maps - get、merge、remove
系列文
sass&css 30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言